<template>
    <div>
        <el-pagination v-model:current-page="currentPage1" v-model:page-size="pageSize" :small="small" :disabled="disabled"
            :background="background" layout="prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
defineProps({
    total: {
        type: Number,
        default: 500
    }
})
const currentPage1 = ref(5)
const pageSize = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped></style>